<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="">
	<!--<![endif]-->

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>Ela Admin - HTML5 Admin Template</title>
		<meta name="description" content="Ela Admin - HTML5 Admin Template">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="stylesheet" href="assets/css/normalize.css">
		<link rel="stylesheet" href="assets/css/bootstrap.min.css">
		<link rel="stylesheet" href="assets/css/font-awesome.min.css">
		<link rel="stylesheet" href="assets/css/themify-icons.css">
		<link rel="stylesheet" href="assets/css/pe-icon-7-filled.css">
		<link rel="stylesheet" href="assets/css/flag-icon.min.css">
		<link rel="stylesheet" href="assets/css/cs-skin-elastic.css">
		<link rel="stylesheet" href="assets/css/style.css">

		<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800' rel='stylesheet' type='text/css'>

		<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> -->

	</head>

	<body>
		<!-- Left Panel -->
		<aside id="left-panel" class="left-panel">
			<nav class="navbar navbar-expand-sm navbar-default">
				<div id="main-menu" class="main-menu collapse navbar-collapse">
					<ul class="nav navbar-nav">
						<li class="active">
							<a href="index.html"><i class="menu-icon fa fa-laptop"></i>后台管理 </a>
						</li>
						<li class="menu-item-has-children dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-cogs"></i>管理员中心</a>
							<ul class="sub-menu children dropdown-menu">
								<li><i class="fa fa-id-card-o"></i>
									<a href="ui-cards.html">个人信息</a>
								</li>
								<li><i class="fa fa-file-word-o"></i>
									<a href="forget.html">修改密码</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="hospital.html"> <i class="menu-icon fa fa-table"></i>医院管理</a>
						</li>
						<li>
							<a href="doctor.html"> <i class="menu-icon fa fa-th"></i>医生管理</a>
						</li>

						<li class="menu-item-has-children dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-tasks"></i>用户管理</a>
							<ul class="sub-menu children dropdown-menu">
								<li><i class="menu-icon fa fa-fort-awesome"></i>
									<a href="font-fontawesome.html">Font Awesome</a>
								</li>
								<li><i class="menu-icon ti-themify-logo"></i>
									<a href="font-themify.html">Themefy Icons</a>
								</li>
							</ul>
						</li>


						<li>
							<a href="disease.html"><i class="menu-icon fa fa-street-view"></i>疾病管理</a>
						</li>
						<!-- /.menu-title -->
						<li  class="active">
							<a href="drug.html" > <i class="menu-icon fa fa-glass"></i>药品管理</a>
						</li>
						
						<li class="menu-item-has-children dropdown">
							<a href="" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-bar-chart"></i>统计排行</a>
							<ul class="sub-menu children dropdown-menu">
								<li><i class="menu-icon fa fa-line-chart"></i>
									<a href="hosrank.html">医院统计</a>
								</li>
								<li><i class="menu-icon fa fa-area-chart"></i>
									<a href="doctorrank.html">医生统计</a>
								</li>
								<li><i class="menu-icon fa fa-pie-chart"></i>
									<a href="charts-peity.html">疾病统计</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
				<!-- /.navbar-collapse -->
			</nav>
		</aside>
		<!-- /#left-panel -->

		<!-- Right Panel -->

		<div id="right-panel" class="right-panel">

			<!-- Header-->
			<header id="header" class="header">
				<div class="top-left">
					<div class="navbar-header">
						<a class="navbar-brand" href="./"><img src="images/logo.png" alt="Logo"></a>
						<a class="navbar-brand hidden" href="./"><img src="images/logo2.png" alt="Logo"></a>
						<a id="menuToggle" class="menutoggle"><i class="fa fa-bars"></i></a>
					</div>
				</div>
				<div class="top-right">
					<div class="header-menu">
						<div class="header-left">
							<button class="search-trigger"><i class="fa fa-search"></i></button>
							<div class="form-inline">
								<form class="search-form">
									<input class="form-control mr-sm-2" type="text" placeholder="Search ..." aria-label="Search">
									<button class="search-close" type="submit"><i class="fa fa-close"></i></button>
								</form>
							</div>

							<div class="dropdown for-notification">
								<button class="btn btn-secondary dropdown-toggle" type="button" id="notification" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fa fa-bell"></i>
                                <span class="count bg-danger">3</span>
                            </button>
								<div class="dropdown-menu" aria-labelledby="notification">
									<p class="red">You have 3 Notification</p>
									<a class="dropdown-item media" href="#">
										<i class="fa fa-check"></i>
										<p>Server #1 overloaded.</p>
									</a>
									<a class="dropdown-item media" href="#">
										<i class="fa fa-info"></i>
										<p>Server #2 overloaded.</p>
									</a>
									<a class="dropdown-item media" href="#">
										<i class="fa fa-warning"></i>
										<p>Server #3 overloaded.</p>
									</a>
								</div>
							</div>

							<div class="dropdown for-message">
								<button class="btn btn-secondary dropdown-toggle" type="button" id="message" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fa fa-envelope"></i>
                                <span class="count bg-primary">4</span>
                            </button>
								<div class="dropdown-menu" aria-labelledby="message">
									<p class="red">You have 4 Mails</p>
									<a class="dropdown-item media" href="#">
										<span class="photo media-left"><img alt="avatar" src="images/avatar/1.jpg"></span>
										<div class="message media-body">
											<span class="name float-left">Jonathan Smith</span>
											<span class="time float-right">Just now</span>
											<p>Hello, this is an example msg</p>
										</div>
									</a>
									<a class="dropdown-item media" href="#">
										<span class="photo media-left"><img alt="avatar" src="images/avatar/2.jpg"></span>
										<div class="message media-body">
											<span class="name float-left">Jack Sanders</span>
											<span class="time float-right">5 minutes ago</span>
											<p>Lorem ipsum dolor sit amet, consectetur</p>
										</div>
									</a>
									<a class="dropdown-item media" href="#">
										<span class="photo media-left"><img alt="avatar" src="images/avatar/3.jpg"></span>
										<div class="message media-body">
											<span class="name float-left">Cheryl Wheeler</span>
											<span class="time float-right">10 minutes ago</span>
											<p>Hello, this is an example msg</p>
										</div>
									</a>
									<a class="dropdown-item media" href="#">
										<span class="photo media-left"><img alt="avatar" src="images/avatar/4.jpg"></span>
										<div class="message media-body">
											<span class="name float-left">Rachel Santos</span>
											<span class="time float-right">15 minutes ago</span>
											<p>Lorem ipsum dolor sit amet, consectetur</p>
										</div>
									</a>
								</div>
							</div>
						</div>

						<div class="user-area dropdown float-right">
							<a href="#" class="dropdown-toggle active" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<img class="user-avatar rounded-circle" src="images/admin.jpg" alt="User Avatar">
							</a>

							<div class="user-menu dropdown-menu">
								<a class="nav-link" href="#"><i class="fa fa-user"></i>My Profile</a>

								<a class="nav-link" href="#"><i class="fa fa-bell-o"></i>Notifications <span class="count">13</span></a>

								<a class="nav-link" href="#"><i class="fa fa-cog"></i>Settings</a>

								<a class="nav-link" href="#"><i class="fa fa-power-off"></i>Logout</a>
							</div>
						</div>
					</div>
				</div>
			</header>
			<!-- /header -->
			<!-- Header-->

			<div class="breadcrumbs">
				<div class="breadcrumbs-inner">
					<div class="row m-0">
						<div class="col-sm-4">
							<div class="page-header float-left">
								<div class="page-title">
									<h1>药品</h1>
								</div>
							</div>
						</div>
						<div class="col-sm-8">
							<div class="page-header float-right">
								<div class="page-title">
									<ol class="breadcrumb text-right">
										<li>
											<a href="#">后台管理</a>
										</li>
										<li>
											<a href="#">药品</a>
										</li>
										<li class="active">列表</li>
									</ol>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="content">
				<div class="row" style="margin-bottom: 20px;">
					<div class="col-lg-2">
						<select id="select-jb-one" class="form-control">
							<option value="">药品类型</option>
						</select>
					</div>
					<div class="col-lg-2">
						<input type="text" id="input-name" class="form-control-success form-control" placeholder="药品名称" />
					</div>
					<div class="col-lg-2">
						<select id="select-chufang" class="form-control">
							<option value="">处方类型</option>
							<option value="OTC非处方药物（甲类）">OTC非处方药物（甲类）</option>
							<option value="OTC非处方药物（乙类）">OTC非处方药物（乙类）</option>
						</select>
					</div>
					<div class="col-lg-2">
						<select id="select-zhongxi" class="form-control">
							<option value="">中西</option>
							<option value="中成药">中成药</option>
							<option value="西药">西药</option>
						</select>
					</div>
					<div class="col-lg-2">
						<select id="select-changuo" class="form-control">
							<option value="">产国</option>
							<option value="国产">国产</option>
							<option value="外用药">外用药</option>
							<option value="进口">进口</option>
						</select>
					</div>
					<div class="col-lg-2">
						<select id="select-yibao" class="form-control">
							<option value="">医保类型</option>
							<option value="医保甲类">医保甲类</option>
							<option value="医保乙类">医保乙类</option>
							<option value="限工伤保险">限工伤保险</option>
							<option value="非医保">非医保</option>
						</select>
					</div>
					<div class="col-lg-2" style="margin-top: 20px;">
						<select id="select-jb-two" class="form-control">
							<option value=""></option>
							<!--此处填充二级基疾病-->
						</select>
					</div>
				</div>
				<div class="animated fadeIn">
					<div class="row">
						<div class="col-lg-12">
							<div class="card">
								<div class="table-stats order-table ov-h">
									<table class="table ">
										<thead>
											<tr>
												<th class="serial"><input type="checkbox" /></th>
												<th class="serial">ID</th>
												<th class="avatar">图片</th>
												<th>名称</th>
												<th>处方</th>
												<th>中西</th>
												<th>医保</th>
												<th>产国</th>
												<th>疾病</th>
												<th>操作</th>
											</tr>
										</thead>
										<tbody id="table-list">
											<!--此处填充医生列表-->
										</tbody>
									</table>
								</div>
								<!-- /.table-stats -->
							</div>
						</div>
						<div class="col-lg-8">
							<button class="btn btn-outline-danger" type="submit" id="btn-delete">删除</button>
						</div>
						<div class="col-lg-4">
							<ul class="pagination">
								<li>
									<button class="btn btn-outline-secondary btn-sm" type="button" onclick="turnPage(-1)">上一页</button>
								</li>
								<li>
									<button class="btn btn-outline-secondary btn-sm" type="button" onclick="turnPage(0)">首页</button>
								</li>
								<li>
									<button id="now-page" class="btn btn-outline-secondary btn-sm" type="button">1</button>
								</li>
								<li>
									<button class="btn btn-outline-secondary btn-sm" type="button" value="" id="end-page" onclick="">尾页</button>
								</li>
								<li>
									<button class="btn btn-outline-secondary btn-sm" type="button" onclick="turnPage(1)">下一页</button>
								</li>
								<li>
									<input oninput = "value=value.replace(/[^\d]/g,'')"  style="width: 30px;margin-left: 10px;" id="input-pageNum"></input>
									<button class="btn btn-outline-secondary btn-sm" type="button" onclick="turnPage(2)">跳转</button>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<!-- .animated -->
			</div>
			<!-- .content -->

			<div class="clearfix"></div>

			<footer class="site-footer">
				<div class="footer-inner bg-white">
					<div class="row">
						<div class="col-sm-6">
							Copyright &copy; 2018 XX Admin. More Templates
							<a href="http://www.cssmoban.com/" target="_blank" title="XX">XX</a> - Collect from
							<a href="http://www.cssmoban.com/" title="XX" target="_blank">XX</a>
						</div>
						<div class="col-sm-6 text-right"> Designed by Colorlib
						</div>
					</div>
				</div>
			</footer>

		</div>
		<!-- /#right-panel -->

		<!-- Right Panel -->

		<!-- Scripts -->
		<script src="assets/js/vendor/jquery-2.1.4.min.js"></script>
		<script src="assets/js/popper.min.js"></script>
		<script src="assets/js/bootstrap.min.js"></script>
		<script src="assets/js/jquery.matchHeight.min.js"></script>
		<script src="assets/js/main.js"></script>

		<script>
			var $ = jQuery.noConflict();

			//获取医生列表
			getDrugList(1, "", "", "", "", "");

			//获取所有一级疾病
			getJBAllOne();


			function getDrugList(pageNum, name, chufang, changuo, jb, zhongxi,yibao) {
				jQuery.ajax({
					url: "http://127.0.0.1:8000/drug/getByIf",
					data: {
						pageNum: pageNum,
						pageSize: 5,
						name: name,
						chufang: chufang,
						changuo: changuo,
						jb: jb,
						zhongxi: zhongxi,
						yibao:yibao
					},
					type: 'POST',
					dataType: "json",
					success: function(d) {
						$("#table-list").empty();
						for(i = 0; i < d.length; i++) {
							addElDrugList(d[i]);
							//console.log(d[i].hosName);
						}
					}
				});
			}

			function addElDrugList(obj) {
				var el = '<tr>' +
					'	<td class="serial"><input type="checkbox" name="doctor" value="'+obj.id+'"/></td>' +
					'	<td class="serial">' + obj.id + '</td>' +
					'	<td class="avatar">' +
					'		<div class="round-img">' +
					'			<a href="#"><img class="rounded-circle" src="' + obj.img + '" alt=""></a>' +
					'		</div>' +
					'	</td>' +
					'	<td> ' + obj.name + ' </td>' +
					'	<td> <span class="name">' + obj.chufang + '</span> </td>' +
					'	<td> <span class="name">' + obj.zhongxi + '</span> </td>' +
					'	<td> <span class="name">' + obj.yibao + '</span> </td>' +
					'	<td> <span class="name">' + obj.changuo + '</span> </td>' +
					'	<td> <span class="name">' + obj.jb + '</span> </td>' +
					'	<td><button class="badge badge-complete" value="'+obj.id+'" onclick="toUpdate(this)">更新</button>' +
					'	</td>' +
					'</tr>';
				$("#table-list").append(el);

			}


			function toUpdate(obj){
				console.log(obj.value)
				window.location.href = "updatedrug.html?id="+obj.value;
			}

			//二级疾病
			function getJBByOne(one) {
				jQuery.ajax({
					url: "http://127.0.0.1:8000/drug/getDrugTwoByOne",
					data:{
						one:one
					},
					type: 'POST',
					dataType: "json",
					success: function(d) {
						for(i = 0; i < d.length; i++) {
							addElOption("select-jb-two", d[i]);
						}
					}
				});
			}

			//一级疾病
			function getJBAllOne() {
				jQuery.ajax({
					url: "http://127.0.0.1:8000/drug/allDrugOne",
					type: 'GET',
					dataType: "json",
					success: function(d) {
						for(i = 0; i < d.length; i++) {
							addElOption("select-jb-one", d[i]);
							//console.log(d[i]);
						}
					}
				});
			}

			function addElOption(container, obj) {
				var el = '<option value="' + obj + '">' + obj + '</option>';
				$("#" + container).append(el);
			}

			function publicSearch(pageNum) {
				var chufang = $("#select-chufang").val();
				var name = $("#input-name").val();
				var zhongxi = $("#select-zhongxi").val();
				var changuo = $("#select-changuo").val();
				var yibao = $("#select-yibao").val();
				var jb = $("#select-jb-two").val();
				console.log(chufang, name, zhongxi, changuo, yibao);
				getDrugList(pageNum, name, chufang, changuo, jb, zhongxi,yibao);
			}

			//选择处方类型
			$("#select-chufang").change(function() {
				publicSearch(1);
			});
			//输入药品名称
			$("#input-name").blur(function() {
				if($("#input-name").val() != "") {
					publicSearch(1);
				}
			});
			//选择中西
			$("#select-zhongxi").change(function() {
				publicSearch(1);
			});
			//选择产国
			$("#select-changuo").change(function() {
				publicSearch(1);
			});
			//选择医保
			$("#select-yibao").change(function() {
				publicSearch(1);
			});
			//选择二级疾病
			$("#select-jb-two").change(function() {
				publicSearch(1);
			});
			//选择一级疾病
			$("#select-jb-one").change(function() {
				$("#select-jb-two").empty();
				var one=$("#select-jb-one").val();
				getJBByOne(one);
				$("#select-jb-two").focus();
			});
			
			//翻页
			function turnPage(type){
				var nowpage=$("#now-page").html();
				console.log(parseInt(nowpage));
				if(parseInt(type)==1){
					publicSearch(parseInt(nowpage)+1);
					$("#now-page").html(parseInt(nowpage)+1);
				}
				if(parseInt(type)==-1){
					if(parseInt(nowpage)==1){
						publicSearch(1);
						$("#now-page").html(1);
					}else{
						publicSearch(parseInt(nowpage)-1);
						$("#now-page").html(parseInt(nowpage)-1);
					}
				}
				if(parseInt(type)==0){
					publicSearch(1);
					$("#now-page").html(1);
				}
				
				if(parseInt(type)==2){
					var pagenum=$("#input-pageNum").val();
					if(pagenum!=""){
						publicSearch(pagenum);
						$("#now-page").html(pagenum);
					}	
				}
			}
			
			$("#btn-delete").click(function() {
				var ids=new Array();
				$('input:checkbox[name=doctor]:checked').each(function(k) {
						ids.push($(this).val());
				});
				//alert(ids);
				 if(ids != null) {
					deleteButh(ids);
				}
			})

			//删除
			function deleteButh(ids) {
				jQuery.ajax({
					url: "http://127.0.0.1:8000/drug/delete",
					traditional:true,
					data: {
						ids: ids
					},
					type: 'POST',
					dataType: "json",
					success: function(d) {
						alert("删除数量：" + d);
					}
				});
			}
		</script>
	</body>

</html>